<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表样式设置</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
            <header>
                <div id="header">HTML5开发</div>
                <div id="right"><a href="">注册</a>&nbsp;|&nbsp;<a href="">登录</a></div>
                <style>
                    body {
                        background: none;
                        background-color: black;
                        color: white;
                    }
                    h1{font:20px blue Arial}
                    ul{font-size:16px;}
                    .none{list-style-type: none;}
                    .circle{list-style-type:circle}
                    .square{list-style-type: square;}
                    .decimal{list-style-type:decimal;}
                    .lower-roman{list-style-type: lower-roman;}
                    .upper-roman{list-style-type:upper-roman;}
                    .lower-alpha{list-style-type: lower-alpha;}
                    .upper-alpha{list-style-type: upper-alpha;}
                    .listimg{list-style-type:none;list-style-image:url("index2.jpeg");}
                    .outside{list-style-position:outside;}
                    .outside>li{border:1px solid #fff;}
                    .inside{list-style-position:inside;}
                    .inside>li{border:1px solid #fff;}
                    .listComplex{list-style:square inside;}
                    
                </style>
            </header>
        <nav>
            <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="1.html">字体样式</a></li>
                    <li><a href="2.html" class="active">列表样式设置</a></li>
                    <li><a href="3.html">背景样式设置</a></li>
                    <li><a href="4.html">固定背景</a></li>
            </ul>
        </nav>
        <hr class="navline">
        <div id="content">
            <h1>列表样式设置</h1>
            <ul class="none">
                <li>无符号列表项1</li>
                <li>无符号列表项2</li>
            </ul>
            <ul class="circle">
                <li>空心圆列表项1</li>
                <li>空心圆列表项2</li>
            </ul>
            <ul class="square">
                <li>实心方块列表项1</li>
                <li>实心方块列表项2</li>
            </ul>
            <ul class="decimal">
                <li>数字列表项1</li>
                <li>数字列表项2</li>
            </ul>
            <ul class="lower-roman">
                <li>小写罗马数字列表项1</li>
                <li>小写罗马数字列表项2</li>
            </ul>
            <ul class="upper-roman">
                <li>大写罗马数字列表项1</li>
                <li>大写罗马数字列表项2</li>
            </ul>
            <ul class="lower-alpha">
                <li>小写英文字母列表项1</li>
                <li>小写英文字母列表项2</li>
            </ul>
            <ul class="upper-alpha">
                <li>大写英文字母列表项1</li>
                <li>大写英文字母列表项2</li>
            </ul>
            <ul class="listimg">
                <li>图像列表项1</li>
                <li>图像列表项2</li>
            </ul>
            <ul class="outside">
                <li>outside列表项1</li>
                <li>outside列表项2</li>
            </ul>
            <ul class="inside">
                <li>inside列表项1</li>
                <li>inside列表项2</li>
            </ul>
            <ul class="listComplex">
                <li>复合列表项1</li>
                <li>复合列表项2</li>
            </ul>
            
        </div>
        <footer>

        </footer>
    </body>
</html>